<script setup>
import { ref } from 'vue';
import { StuloginApi } from '@/api/student';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router=useRouter();

const loginForm=ref({
    name:'', no:''
});

const login= async ()=>{
    const result= await StuloginApi(loginForm.value);
    if(result.code){
        ElMessage.success('登录成功');
        // 保存学号
        localStorage.setItem('no',loginForm.value.no);
        // 保存token
        localStorage.setItem('Student',JSON.stringify(result.data));// 保存到本地,JSON.stringify的作用是把JSON对象转换成字符串
        // 删除管理员的token
        localStorage.removeItem('loginUser');
        router.push('/student');
    }else{
        ElMessage.error(result.msg);
    }
}


const clear=()=>{
    loginForm.value={name:'', no:''};
}
</script>

<template>
    <div id="container">
      <div class="login-form">
        <el-form label-width="80px">
          <p class="title">学生选课辅助系统</p>
          <el-form-item label="姓名" prop="username">
            <el-input v-model="loginForm.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
  
          <el-form-item label="学号" prop="password">
            <el-input type="password" v-model="loginForm.no" placeholder="请输入密码"></el-input>
          </el-form-item>
  
          <el-form-item>
            <el-button class="button" type="primary" @click="login">登 录</el-button>
            <el-button class="button" type="info" @click="clear">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <style scoped>
  #container {
    padding: 10%;
    height: 410px;
    background-image: url('../../../assets/6.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .login-form {
    max-width: 400px;
    padding: 30px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: white;
  }
  
  .title {
    font-size: 30px;
    font-family: '楷体';
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
  }
  
  .button {
    margin-top: 30px;
    width: 120px;
  }
  </style>